<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>阶段一第二周4-8作业</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-url-parser/2.3.1/purl.min.js"></script>
  <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock.js"></script>
</head>
<body>
  页码：<input type="text" class="page"> 数量：<input type="text" class="pageNum"><button type="button" id="app">点击获取Lists</button>
  <br><pre class="showData"></pre>
</body>
<script>
  $('#app').click(function () {
      let page = $('.page').val();
      let pageNum = $('.pageNum').val();
      console.log(page,pageNum)
      $.ajax({
          url: 'https://api.yourdomain.com/lists',
          type: "get",
          dataType: "json",
          data: {
              page: page,
              pageNum: pageNum
          }
      }).done(function (data,status,xhr) {
          console.log(data,$('.showData')[0])
          $('.showData')[0].innerHTML = JSON.stringify(data,null,4)
      })
  })

  Mock.mock(/https:\/\/api.yourdomain.com\/lists/, 'get', options => {
      const num = $.url(options.url).param('pageNum')
      return Mock.mock({
          'status': '200',
          [`data|${num}`]: [{
              'tid|+1': 1,
              'title': '@sentence(5, 10)',
              'catalog': 'index',
              'fav': '@natural(1000, 10000)',
              'created': '@date(yyyy-MM-dd HH:mm:ss)',
              'isEnd': () => num,
              'answer': '@integer(0, 100)',
              'user': {
                  'avatar': '@image',
                  'name': '@cname',
                  'isvip|0-1': 1,
                  'level|1-10': 1
              }
          }],
          'msg': `返回Mock数据，长度为 ${num}`
      })
  })
</script>
</html>